<template>
  <div>
    <el-button type="primary" @click="handleAddPlatformShow">新增平台</el-button>
    <el-dialog v-model="addPlatformShow" title="创建新平台" width="800px" top="10vh" :z-index="999">
      <div>
        <!-- 平台类型选择 -->
        <div class="platform-cards flex flex-wrap gap-4">
          <div
            v-for="(item, key) in platformTypes"
            :key="key"
            class="platform-card cursor-pointer rounded-md border border-solid shadow-sm hover:shadow-md transition-all duration-300"
            :class="{ 'is-selected': selectedType === item.type }"
            style="width: 140px; padding: 20px 10px; border-color: var(--el-border-color-light)"
            @click="selectPlatform(item.type)"
          >
            <div class="flex flex-col items-center">
              <svg class="icon w-16 h-16 mb-3 transition-all duration-300 hover:scale-110 hover:rotate-7deg" aria-hidden="true">
                <use :xlink:href="getIconByType(item.type)"></use>
              </svg>
              <div class="text-center">
                <p class="text-base font-medium mb-1" style="color: var(--el-text-color-primary)">{{ item.addText }}</p>
                <!--                <p class="text-xs" style="color: var(&#45;&#45;el-text-color-secondary)">{{ item.description }}</p>-->
              </div>
              <div class="mt-3 text-xs" style="color: var(--el-color-primary)">
                可创建数量: {{ Math.max(0, wallet[item.type] - wallet.use_count[item.type]) }}
              </div>
            </div>
          </div>
        </div>
        <!-- 快速创建表单 -->
        <div v-if="selectedType" class="mt-6 p-4 rounded-md quick-create-form">
          <h3 class="text-lg font-bold mb-4 quick-create-title">快速创建</h3>
          <p class="text-sm mb-4 quick-create-desc">{{ getCurrentPlatformDescription() }}</p>
          <el-form :model="formData" label-width="80px" label-position="left" class="dk-form">
            <el-form-item label="平台名称" required>
              <el-input v-model="formData.name" placeholder="请输入平台名称" />
              <div class="form-help">设置平台名称，用于区分不同平台，长度限制为1-30个字符</div>
            </el-form-item>
            <el-form-item label="平台描述">
              <el-input v-model="formData.description" placeholder="简单描述" />
              <div class="form-help">设置平台描述，用于区分不同平台，长度限制为1-100个字符</div>
            </el-form-item>
            <el-form-item label="平台图标">
              <dk-image-input v-model="formData.logo"></dk-image-input>
              <div class="form-help">设置平台图标</div>
            </el-form-item>
          </el-form>
          <div class="mt-4 flex justify-end">
            <el-button type="primary" @click="quickCreate">立即创建</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessageBox, ElMessage } from 'element-plus'
import { addPlatform } from '@/api/platform'

defineOptions({
  name: 'DkCustomerPlatformAdd'
})

const router = useRouter()
const userStore = useUserStore()
const formData = reactive({
  name: '',
  description: '',
  logo: ''
})

const addPlatformShow = ref(false)
const wallet = ref({})
const selectedType = ref('wechat')

const platformTypes = reactive([
  {
    value: 1,
    label: '微信公众号',
    addText: '微信公众号',
    description: '管理微信公众号相关应用平台，支持同一公众号多个应用无冲突。',
    icon: 'icon-wechat',
    type: 'wechat'
  },
  {
    value: 2,
    label: '小程序集',
    addText: '小程序集',
    description: '创建小程序合集，可以集中管理多个微信小程序、抖音小程序。',
    icon: 'icon-wxapp',
    type: 'min_app'
  },
  {
    value: 3,
    label: '企业微信',
    addText: '企业微信',
    description: '整合企业微信，可以创建多个企业微信应用。',
    icon: 'icon-work-wechat',
    type: 'work_wechat'
  },
  {
    value: 4,
    label: '抖音',
    addText: '抖音',
    description: '管理抖音H5应用，同一抖音配置项可以创建多个应用。',
    icon: 'icon-free',
    type: 'douyin'
  },
  {
    value: 5,
    label: '自由平台',
    addText: '自由平台',
    description: '可自由的创建不同应用,没有平台配置项。',
    icon: 'icon-free',
    type: 'free'
  }
])

const getIconByType = (type) => {
  const iconMap = {
    wechat: '#icon-weixin2',
    min_app: '#icon-xiaochengxu',
    work_wechat: '#icon-qiyeweixin1',
    douyin: '#icon-douyin1',
    free: '#icon-yingyong4'
  }
  return iconMap[type] || '#icon-yingyong4'
}

const handleAddPlatformShow = async () => {
  const res = await userStore.getUserInfo()
  wallet.value = res.wallet
  addPlatformShow.value = true
  selectedType.value = 'wechat'
}

const selectPlatform = (type) => {
  selectedType.value = type
}

const quickCreate = async () => {
  if (!formData.name) {
    ElMessage.warning('请输入平台名称')
    return
  }

  // 路由地址映射
  const getRouterPath = (type) => {
    if (type === 'min_app') {
      return 'app'
    }
    return type
  }

  addPlatform(selectedType.value, formData).then((res) => {
    if (res.code === 0) {
      addPlatformShow.value = false
      ElMessageBox.alert('创建成功，点击前往', '提示', {
        confirmButtonText: 'OK',
        callback: (action) => {
          // 提示跳转
          router.push({ path: `/${getRouterPath(selectedType.value)}`, query: { p: res.data.plaid } })
        }
      })
    }
  })
}

const getCurrentPlatformDescription = () => {
  const selectedPlatform = platformTypes.find((item) => item.type === selectedType.value)
  return selectedPlatform ? selectedPlatform.description : ''
}

onMounted(() => {})
</script>

<style scoped>
.platform-card.is-selected {
  border-color: var(--el-color-primary) !important;
  background-color: var(--el-color-primary-light-9);
}

.quick-create-form {
}

.quick-create-title {
  color: var(--el-color-primary);
}

.quick-create-desc {
  color: var(--el-text-color-regular);
}

.form-label {
  color: var(--el-text-color-primary);
}
</style>
